import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image
} from '@hippy/react';

import IconHome from './assets/shouye.png';
import IconHomeSec from './assets/shouye-s.png';
import IconCaifu from './assets/caifu.png';
import IconCaifuSec from './assets/caifu-s.png';
import IconZixun from './assets/zixun.png';
import IconZixunSec from './assets/zixun-s.png';
import IconHuodong from './assets/huodong.png';
import IconHuodongSec from './assets/huodong-s.png';
import IconWode from './assets/wode.png';
import IconWodeSec from './assets/wode-s.png';

import HomePage from './pages/HomePage';
import CaifuPage from './pages/CaifuPage';
import ZixunPage from './pages/ZixunPage';
import HuodongPage from './pages/HuodongPage';
import WodePage from './pages/WodePage';

import Utils from './utils';

const styles = StyleSheet.create({
  bottomTab: {
    backgroundColor: 'white',
    borderTopWidth: 1,
    borderStyle: 'solid',
    borderTopColor: '#eee',
  },
  buttonContainer: {
    height: 48,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  button: {
    height: 48,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  img: {
    marginTop: 4,
    width: 20,
    height: 20,
  },
  buttonText: {
    marginTop: 2,
    color: '#242424',
    fontSize: 14,
  },
  blankPage: {
    flex: 1,
    backgroundColor: 'white',
  },
});

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = ({
      curIndex: 0,
    });
  }

  componentDidMount() {

  }

  render() {
    const { curIndex } = this.state;

    const renderPage = () => {
      switch (curIndex) {
        case 0:
          return <HomePage />;
        case 1:
          return <CaifuPage />;
        case 2:
          return <ZixunPage />;
        case 3: 
          return <HuodongPage />;
        case 4: 
          return <WodePage />;
        default:
          return <View style={styles.blankPage} />;
      }
    };

    const renderButton = () => {
      const buttonArray = [
        {text: "首页", img: IconHome, secImg: IconHomeSec},
        {text: "财富", img: IconCaifu, secImg: IconCaifuSec},
        {text: "资讯", img: IconZixun, secImg: IconZixunSec},
        {text: "活动", img: IconHuodong, secImg: IconHuodongSec},
        {text: "我的", img: IconWode, secImg: IconWodeSec},
      ];
      return (
        buttonArray.map((item, i) => (
          <View
            key={`button_${i}`}
            style={styles.button}
            onClick={() => this.setState({ curIndex: i })}
          >
            <Image
              style={styles.img}
              source={{ uri: i === curIndex ? item.secImg : item.img }}
            />
            <Text
              style={[styles.buttonText, i === curIndex ? { color: '#4c9afa' } : null]}
              numberOfLines={1}
            >
              {item.text}
            </Text>
          </View>
        ))
      );
    };

    return (
      <View style={{flex: 1}}>
        {renderPage()}
        <View 
        style={[
          {height: 48 + (Utils.isiPhoneX() ? 34 : 0)}, 
          styles.bottomTab
          ]}
        >
          <View style={styles.buttonContainer}>
            {renderButton()}
          </View>
        </View>
      </View>
    );
  }
}
